<!-- 首页 手机号登录 -->
<template>
	<view class="login-box">
		<view class="top-logo-box">
			<view class="top-logo">
				<img src="@/assets/image/logo.png" />
			</view>
			<view class="logo-text">找对象就来媛世界</view>
		</view>
		<van-button type="primary" class="mobile-login-btn" @click="mobileLogin">手机号登录</van-button>
		<agreement :agreementList="state.agreementList" />
	</view>
	<uni-popup ref="popupRef" type="center">
		<view class="popup-content" v-if="state.show">
			<view class="title">
				温馨提示
			</view>
			<view class="tiyan-box">
				<view class="guanzhu">
					苹果iOS用户请关注微信公众号<text style="color: red;">【媛世界】</text>随时体验极速版！不错过任何一条消息，更能享受iOS充值优惠。
				</view>
				<!-- 	<view class="guanzhu">
					点击关注公众号跳转至微信输入【媛世界】关注公众号点击在线体验即可体验媛世界极速版。
				</view> -->
			</view>
			<view class="footer">
				<van-button type="primary" @click="copy()">关注公众号</van-button>
				<van-button type="primary" @click="experience()">立即体验</van-button>
			</view>
		</view>
		<view class="popup-content" v-else>
			<uni-icons class="close-btn" type="closeempty" size="30" @click="closeFn()"></uni-icons>
			<img src="@/assets/image/01.jpg" alt="">
		</view>
	</uni-popup>
</template>

<script setup>
	import agreement from "@/components/agreement/index.vue"
	import {
		reactive,
		getCurrentInstance,
		onMounted,
		ref
	} from "vue"
	const state = reactive({
		show: true,
		agreementList: [{
				id: 1,
				name: "《媛世界用户协议》",
				url: "https://www.ysjcp.com/UserUseAgreement.html"
			},
			{
				id: 2,
				name: "《媛世界隐私条款》",
				url: "https://www.ysjcp.com/PrivacyAgreement.html"
			}
		]
	})

	let popupRef = ref(null)

	const mobileLogin = () => {
		uni.navigateTo({
			url: "/pages/login/mobileNumberLogin/index"
		})
	}

	const copy = () => {
		uni.setClipboardData({
			data: '媛世界', //要被复制的内容
			success: () => { //复制成功的回调函数
				uni.showToast({
					title: "已将关键字 '媛世界' \n 复制到剪切板",
					icon: 'none',
					duration: 2000
				});
			}
		});
	}

	// 体验
	const experience = () => {
		state.show = false
	}

	const closeFn = () => {
		popupRef.value.close()
	}

	onMounted(() => {
		popupRef.value.open()
	})
</script>

<style lang="scss" scoped>
	.login-box {
		position: fixed;
		width: 100%;
		height: 100%;
	}

	.top-logo-box {
		.logo-text {
			text-align: center;
			margin-top: 60rpx;
			font-size: 40rpx;
			color: #5C5C5C;
		}

		.top-logo {
			display: flex;
			justify-content: center;
			padding-top: 314rpx;

			img {
				width: 312rpx;
				height: 104rpx;
			}
		}
	}

	.mobile-login-btn {
		font-size: 40rpx;
		margin-top: 220rpx;
		width: calc(100vw - 120rpx);
	}

	.agreement-box {
		position: fixed;
		bottom: 20rpx;
		width: 100vw;
		display: flex;
		justify-content: center;

		.agreement-text {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			height: 32rpx;
			line-height: 32rpx;

			img {
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}

			.text-box {
				color: #999999;
			}
		}
	}

	.zhezhao {
		z-index: 2000;
	}

	.title {
		text-align: center;
		font-size: 50rpx;
		padding-top: 50rpx;
		font-weight: bold;
	}

	.tiyan-box {
		text-indent: 72rpx;
		padding: 30rpx;
		font-size: 36rpx;
		line-height: 1.5;
	}

	.guanzhu {
		margin-bottom: 15rpx;
	}

	.footer {
		display: flex;
		justify-content: center;
		padding-bottom: 50rpx;

		.van-button {
			margin: 0 20rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #ffe0b1;
		}

		.van-button:nth-child(1) {
			border: 2rpx solid #000;
			background-color: #fff;
			color: #000;
		}
	}

	.popup-content {
		background: #fff;
		margin: 0 60rpx;
		border-radius: 24rpx;
		position: relative;

		.close-btn {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}

		img {
			display: block;
			padding: 30rpx 0;
			width: calc(100% - 60rpx);
			margin: 0 auto;
		}
	}
</style>
